Part 1: Figma
At the beginning of the poster assignment we were given the choice to choose one of a multitude of content packages to design our posters around. After reading through the posters I concluded that I would work on the art exhibit "Post-Atomic-Eyes". I chose this content package because the packages theme of a post-nuclear world could lead to multiple different trains of thought
Firstly I began my figma file by simply dumping the information on the page and finding ways to organize it. Based off of Professors Ha's website samples he showed in class, I began experimenting with circles and button placements to fill in the page.
In my second concept I organized the information in a more consistent way, with a header and footer and splitting the body in two seperate parts. This concept becomes the base for my later designs as personally I found the positioning of the dates and information appealing. However the issue I came across with is that as a "poster" it doesn't visually pull you in.
Faced with the issue of design and appeal I began to play around with colour. I settled on this pastel sage green colour which I believe compliments the vibrant orange nicely. With that I began experimenting with reducing some of the information by removing specific dates and locations to clean up the page. Concerned with the reduction of information I began working on the next design which is where I realized an element of figma which I found complimented my 'post-nuclear' design quite nicely. That being the grid. To me it reminds me of a radar and early 2000's technology which would fit comfortably into the time period of nuclearization and cold war era technology leading to whats happening today.
With concepts 3 and 4 I finally began to gain an idea for what I wanted my website to be. Firstly I decided that I'm going to remove information on the splash page and create seperate pages for information. This way it would satisfy my want to include information for the event but maintain the cleanliness that I had without it. Secondly I ensured to keep the grid on for each of my designs cause I decided to keep the grid as a central element of my assignment.
Part 2: Coding
For the second coding part of my assignment I began by using the code we gained in exercise 4 to assemble my project. Much of my website was reusing and adjusting code from previous assignments. Because my design hadn't been too complicated I found the coding process pretty straightforward. One of the big challenges I was faced with was making the grid design appear in the background. I realized the grid which we create manually for project 1 wouldn't work in my scenario as I needed my grid to be visible outside of the console. With this I began searching google and found a website which used linear gradients to create a grid pattern. I inserted this code and tweaked the colour into the hero-section/body of the project and it worked perfectly giving that early 2000's vibe I was aiming for.
Another issue I came to face was the text, I realized that the font I used in figma wasn't a default font saved in visual studio code so I had to look through Adobe Fonts before finding the font I used in my design on google fonts. Thankfully thanks to exercise 3 I found importing it nice and easy.
Finally after finishing my design I decided I wanted the website to be a bit more interactive, so I made most of the headings increase when you hover over them so that it is not just a flat image.
